【第一課】解決學了 JavaScript 卻做不出東西：用 DOM 操作打造 30 天實用網頁效果

前言：為什麼學了 JavaScript，打開空白網頁還是不知道怎麼下手？

無數程式初學者在學習 JavaScript後，都會經歷一段盲目期：好不容易看懂了變數、陣列、if...else 判斷式與 for 迴圈，但當自己試著打開空白的 HTML 檔案時，卻寫不出任何一個實用的網頁效果。

問題的根源在於：

你還缺乏 JavaScript 與 HTML 之間的 bridge —— DOM（Document Object Model）操作

網頁開發就像蓋房子：

• HTML 決定骨架（有哪些內容）
• CSS 決定裝潢（長什麼樣子）
• JavaScript 決定大腦與開關（怎麼進行互動）
簡單來說，DOM 就是 JavaScript 拿來控制 HTML 元素的工具。只要掌握 DOM 操作，就能用語法打造出畫面上看得見、用得著的實用互動效果。

工欲善其事：我們會用到甚麼

這 30 天的實作不需要安裝複雜的大型框架，回歸最單純的前端基本功，只需要以下東西：

• 編輯器：Visual Studio Code (VS Code)
目前蠻常用程式碼編輯器。建議安裝外掛 Live Server，只要儲存檔案就能即時在瀏覽器看到網頁更新結果。
• 瀏覽器：Google Chrome
除了用來顯示網頁，我們還會使用 Chrome 內建的 DevTools，特別是 Console（主控台）與 Elements 頁籤，用來偵測程式碼錯誤與檢查 DOM 結構。
• 版本控制與展示：GitHub & GitHub Pages
我會將 30 天的作品上傳至 GitHub，並透過 GitHub Pages 部署成免費的線上展示網頁，建立自己的作品集。

30 天學習路線總目錄

第一週：基礎操作與 UI 互動（第一課 - 第七課）

**第一課：** 【引言】為什麼學了 JS 卻做不出東西？DOM 是你的第一把鑰匙（環境建置與總目錄）  
**第二課：** 【按鈕點擊】手把手打造「夜間/日間模式」切換器（`classList.toggle`）  
**第三課：** 【表單控制】顯示/隱藏密碼與明暗文切換（修改 `input.type`）  
**第四課：** 【內容篩選】文字框即時搜尋/過濾清單（`input` 事件與 `includes()`）  
**第五課：** 【元件設計】手風琴式 FAQ 折疊選單（DOM 歷遍與事件委派）  
**第六課：** 【視覺反饋】字數計數器與上限提示（`keyup` 與樣式控制）  
**第七課：** 【作品整合 1】綜合練習：個人風格的「待辦事項標籤牆」  

第二週：常見網頁組件與動畫控制（第八課 - 第十四課）

**第八課：** 【視窗控制】頁面滾動進度條（`window.scrollY` 與百分比計算）  
**第九課：** 【視窗控制】「回到頂部」按鈕與平滑滾動（`scrollTo`）  
**第十課：** 【彈窗效果】輕量化 Modal 燈箱效果（遮罩層控制與阻擋滾動）  
**第十一課：** 【動態生成】無窮滾動/卡片動態渲染（`createElement` 與 `appendChild`）  
**第十二課：** 【視覺切換】Tab 標籤頁內容切換器（`dataset` 的妙用）  
**第十三課：** 【時間應用】倒數計時器 / 倒數開獎畫面（`setInterval` 與時間格式化）  
**第十四課：** 【作品整合 2】綜合練習：可自動播放與手動切換的「圖片輪播器」  

第三週：瀏覽器 API 與高級互動（第十五課 - 第二十一課）

**第十五課：** 【資料儲存】讓資料不消失！結合 `localStorage` 的簡易筆記本  
**第十六課：** 【拖曳互動】HTML5 Drag and Drop API 打造看板拖拽效果  
**第十七課：** 【剪貼簿操作】一鍵複製折扣碼 / 連結（`navigator.clipboard`）  
**第十八課：** 【網路狀態】偵測使用者離線/在線狀態並顯示 Prompt 提示  
**第十九課：** 【媒體控制】自訂 Video/Audio 播放器（控制播放、暫停、進度條）  
**第二十課：** 【效能優化】防止頻繁觸發的 Debounce與 Throttle（節流）在 DOM 操作上的應用  
**第二十一課：** 【作品整合 3】綜合練習：支援本機儲存與畫筆顏色的「Canvas 簡易塗鴉板」 

第四週：API 資料串接與專案實戰（第二十二課 - 第三十課）

**第二十二課：** 【API 串接】用 `fetch` 抓取資料並渲染成卡片（以開放 API 為例）  
**第二十三課：** 【非同步 DOM】載入中（Skeleton / Spinner）骨架屏效果與錯誤處理  
**第二十四課：** 【視覺展示】動態數據圖表/進度條動畫（純 DOM/CSS 實作）  
**第二十五課：** 【實戰專案 Pt. 1】即時天氣資訊卡片 - API 串接與 UI 結構設計  
**第二十六課：** 【實戰專案 Pt. 2】即時天氣資訊卡片 - 動態切換天氣圖示與背景  
**第二十七課：** 【實戰專案 Pt. 3】即時天氣資訊卡片 - 加入搜尋歷史與城市快速切換  
**第二十八課：** 【重構與優化】寫出好維護的 DOM 操作代碼：解耦與模組化思維  
**第二十九課：** 【總結與延伸】從原生 DOM 到前端框架
**第三十課：** 【完賽心得】30 天的實戰之旅：你已經掌握了打造互動網頁的能力！  

下集預告：第二課 按鈕點擊：手把手打造「夜間/日間模式」切換器